<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            transform-style:preserve-3d; 
            /* transition: all 1.8S; */
            animation: move 5s linear infinite;
            text-align: center;
            line-height: 200px;
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.8;
        }
        .box div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            transform: translateZ(100px);

        }
        .box div:nth-child(2) {
            width: 200px;
            height: 200px;
            background-color: orange;
            transform: translateY(-100px) rotateX(90deg);
        }
        
        .box div:nth-child(3) {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateZ(-100px) rotate(0deg);
        }
        .box div:nth-child(4) {
            width: 200px;
            height: 200px;
            background-color: purple;
            transform: translateY(100px) rotateX(90deg);
        }
        .box div:nth-child(5) {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translateX(-100px) rotateY(90deg);          
        }
        .box div:nth-child(6) {
            width: 200px;
            height: 200px;
            background-color: blue;
            transform: translateX(100px) rotateY(90deg);          
        }
        /* .box:hover {
            transform: rotate3d(1, 1, 0, 360deg);
        } */
        @keyframes move {
            0% {
                transform: rotate3d(1, 1, 0, 0deg);
            }
            50% {
                transform: rotate3d(1, 1, 0, 360deg);
            }
            100% {
                transform: rotate3d(1, 1, 0, -360deg);
            }
            
            /* 75% {
                transform: rotate3d(1, 0, 1, 360deg);
            }
            100% {
                transform: rotate3d(0, 1, 1, 360deg);
            } */ 
        } 
    </style>
</head>
<body>
    <div class="box">
        <div>前</div>
        <div>上</div>
        <div>后</div>
        <div>下</div>
        <div>左</div>
        <div>右</div>
    </div>
</body>
</html>